<template>
  <el-container direction="vertical">
    <Header />
    <el-main>
      <el-row style="margin-bottom: 100px;">
        <el-col :span="16">
          <img :src="topImg.news_img" style="height: 500px;width: 100%;">
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" style="height: 500px; line-height: 50px;">
            <h2 @click="getNewId( topImg.news_id)">{{topImg.digest}}</h2>
            <h3>{{topImg.news_title}}</h3>
          </el-card></el-col>
      </el-row>
      <el-row v-for="(item,index) in itemData" :key="index">
        <el-col :span="6">
          <img :src="item.news_img" style="height: 250px;width: 100%;">
        </el-col>
        <el-col :span="18">
          <el-card class="box-card" style="height: 250px;">
            <h1 @click="getNewId(item.news_id)">{{ item.news_title }}</h1>
            <span>{{ item.digest }}</span><br><br><br>
            <span style="color: gray;">发布者：{{ item.source }}</span><br><br>
            <span style="color: gray;">发布时间：{{ item.post_date }}</span>

          </el-card></el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Header from "../components/Header.vue"
export default {
  data() {
    return {
    
      topImg:"",

      itemData: "",
      // category_id:533
      // itemImg: ''
    }
  },
  components: {
    Header,

  },
  async created() {
    this.axios.get(`http://localhost:3000/news/getTypeNewHome?category_id=536`)
      .then(res => {
        // 请求成功时，处理返回的数据  
        this.itemData = res.data.data;
        this.topImg=res.data.data[8];

        // this.itemImg = res.data.news_img
        // console.log(this.itemData);
      })
      .catch(error => {
        // 请求失败时，处理错误  
        console.error(error);
      });
  },
  methods:{
    getNewId(id) {
      // console.log(id);
      this.$router.push(`/detailPage/${id}`);

    }
  }
}
</script>

<style scoped>
h2:hover {
  color: rgb(193, 1, 1);
}

h1:hover {
  color: rgb(193, 1, 1);
}

span:hover {
  /* color: rgb(255, 208, 75); */
  text-decoration-line: underline;
}
</style>